<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="识别代码(VIN)">
              <a-input
                placeholder="请输入识别代码(VIN)"
                @blur="getStorageName"
                v-decorator="['vin', { rules: [{ required: true, message: '请输入识别代码(VIN)' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="移出库房名称">
              <a-input
                placeholder="请输入移出库房名称"
                v-decorator="['storeName', { rules: [{ required: true, message: '请输入移出库房名称' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="移入库房名称">
              <a-select
                @change="changeDepositNotes"
                v-decorator="['depositAttribute', { rules: [{ required: true, message: '请选择移入库房名称' }] }]"
                placeholder="移入库房名称"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option :value="storeId[key]" v-for="(value,key) in storeName" :key="key">{{value}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登记时间">
              <a-date-picker
                placeholder="请输入登记时间"
                style="width: 100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['orderDate', { rules: [{ required: true, message: '请输入登记时间' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登记人">
              <a-input
                placeholder="请输入登记人"
                v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入登记人' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 主表单区域 -->
      <!-- <a-form :form="form">
        <a-row>
          <h2>订单信息：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单号">
              <a-input
                placeholder="请输入订单号"
                v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入订单号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车报价金额">
              <a-input-number
                placeholder="请输入订单总价"
                style="width: 100%"
                v-decorator="['quoteAmount', { rules: [{ required: true, message: '请输入汽车报价' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订/定金金额">
              <a-input-number
                placeholder="请输入订/定金金额"
                style="width: 100%"
                v-decorator="['epositAmount', { rules: [{ required: true, message: '请输入订/定金金额' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订/定金描述">
              <a-input
                placeholder="订/定金描述"
                v-decorator="['depositContent', { rules: [{ required: true, message: '请输入订/定金不可退原因' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订/定金性质">
              <a-select
                @change="changeDepositNotes"
                v-decorator="['depositAttribute', { rules: [{ required: true, message: '请选择订/定金性质' }] }]"
                placeholder="订/定金性质"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">可退</a-select-option>
                <a-select-option value="2">不可退</a-select-option>
                <a-select-option value="3">有条件可退</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单生成时间">
              <a-date-picker
                placeholder="请输入订单生成时间"
                style="width: 100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['orderDate', { rules: [{ required: true, message: '请输入订单生成时间' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12" v-if="showDing">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订/定金不可退原因">
              <a-input
                placeholder="请输入订/定金不可退原因"
                v-decorator="['depositNotes', { rules: [{ required: false, message: '请输入订/定金不可退原因' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>销售方信息：</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业名称">
              <a-input
                placeholder="请输入企业名称"
                style="width: 100%"
                v-decorator="['enterpriseName', { rules: [{ required: false, message: '请输入企业名称' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="社会信用统一代码">
              <a-input
                placeholder="请输入社会信用统一代码"
                style="width: 100%"
                :disabled="showEnterpriseUscc"
                v-decorator="['enterpriseUscc', { rules: [{ required: true, message: '请输入社会信用统一代码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售区域">
              <a-select
                v-decorator="['registerDistinct', { rules: [{ required: true, message: '请选择销售区域' }] }]"
                placeholder="销售区域"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="黄浦区">黄浦区</a-select-option>
                <a-select-option value="徐汇区">徐汇区</a-select-option>
                <a-select-option value="长宁区">长宁区</a-select-option>
                <a-select-option value="静安区">静安区</a-select-option>
                <a-select-option value="普陀区">普陀区</a-select-option>
                <a-select-option value="虹口区">虹口区</a-select-option>
                <a-select-option value="杨浦区">杨浦区</a-select-option>
                <a-select-option value="闵行区">闵行区</a-select-option>
                <a-select-option value="宝山区">宝山区</a-select-option>
                <a-select-option value="嘉定区">嘉定区</a-select-option>
                <a-select-option value="浦东新区">浦东新区</a-select-option>
                <a-select-option value="金山区">金山区</a-select-option>
                <a-select-option value="松江区">松江区</a-select-option>
                <a-select-option value="青浦区">青浦区</a-select-option>
                <a-select-option value="奉贤区">奉贤区</a-select-option>
                <a-select-option value="崇明区">崇明区</a-select-option>
                <a-select-option value="外省">外省</a-select-option>
                <a-select-option value="线上平台">线上平台</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售地址">
              <a-input
                placeholder="请输入销售地址"
                v-decorator="['operationAddr', { rules: [{ required: true, message: '请输销售地址' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售顾问姓名">
              <a-auto-complete
                placeholder="请输入销售顾问姓名"
                style="width: 100%"
                :data-source="saleSource"
                @select="saleSelect"
                @change="saleChange"
                v-decorator="['salesName', { rules: [{ required: false, message: '请输入销售顾问姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售顾问手机号码">
              <a-input
                placeholder="请输入销售顾问手机号码"
                v-decorator="['salesPhone', { rules: [{ required: false, message: '请输入销售顾问手机号码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>订购方信息：</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订购方姓名">
              <a-input
                placeholder="请输入订购方姓名"
                v-decorator="['ownerName', { rules: [{ required: true, message: '请输入订购方姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订购方的电话">
              <a-input
                placeholder="请输入订购方的电话"
                v-decorator="['ownerPhone', { rules: [{ required: true, message: '请输入订购方的电话' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订购方证件类型">
              <a-select
                v-decorator="['documentType', { rules: [{ required: true, message: '请选择订购方证件类型' }] }]"
                placeholder="订购方证件类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">身份证</a-select-option>
                <a-select-option value="2">护照</a-select-option>
                <a-select-option value="3">士兵证军官证</a-select-option>
                <a-select-option value="4">港澳居民居住证</a-select-option>
                <a-select-option value="5">港澳居民来往内地通行证</a-select-option>
                <a-select-option value="6">台湾居民居住证</a-select-option>
                <a-select-option value="7">台湾居民来往大陆通行证</a-select-option>
                <a-select-option value="8">外国人永久居留身份证</a-select-option>
                <a-select-option value="9">其他有效身份证明</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订购方证件号码">
              <a-input
                placeholder="请输入订购方证件号码"
                v-decorator="['documentNumber', { rules: [{ required: true, message: '请输入订购方证件号码' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>车辆信息:</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车品牌">
              <a-input
                placeholder="请输入汽车品牌"
                v-decorator="['carBrand', { rules: [{ required: true, message: '请输入汽车品牌' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车车型">
              <a-input
                placeholder="请输入汽车车型"
                v-decorator="['carModel', { rules: [{ required: false, message: '请输入汽车车型' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车架号（VIN码）">
              <a-input
                placeholder="请输入车架号"
                v-decorator="['carVin', { rules: [{ required: false, message: '请输入车架号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车类型">
              <a-select
                v-decorator="['carType', { rules: [{ required: true, message: '请输入汽车类型' }] }]"
                placeholder="请选择汽车类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">燃油车</a-select-option>
                <a-select-option value="2">新能源汽车</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型配置">
              <a-input
                placeholder="请输入车型配置"
                v-decorator="['carTypeConfiguration', { rules: [{ required: true, message: '请输入车型配置' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车燃料类型">
              <a-select
                v-decorator="['fuelType', { rules: [{ required: false, message: '请输入汽车燃料类型' }] }]"
                placeholder="请选择汽车燃料类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">油/电</a-select-option>
                <a-select-option value="2">电</a-select-option>
                <a-select-option value="3">油</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否为新车">
              <a-select
                v-decorator="['isNewCar', { rules: [{ required: true, message: '是否为新车' }], initialValue: '是' }]"
                placeholder="请选择是否为新车"
              >
                <a-select-option value="是">是</a-select-option>
                <a-select-option value="否">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="进口机动车辆随车检验单号">
              <a-input
                placeholder="请输入进口机动车辆随车检验单号"
                v-decorator="[
                  'importEngineNumber',
                  { rules: [{ required: false, message: '请输入进口机动车辆随车检验单号' }] },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="外饰颜色">
              <a-input
                placeholder="请输入外饰颜色"
                v-decorator="['carColor', { rules: [{ required: true, message: '请输入外饰颜色' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内饰颜色">
              <a-input
                placeholder="请输入内饰颜色"
                v-decorator="['interiorColor', { rules: [{ required: true, message: '请输入内饰颜色' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发动机号">
              <a-input
                placeholder="请输入发动机号"
                v-decorator="['engineNumber', { rules: [{ required: false, message: '请输入发动机号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合格证号">
              <a-input
                placeholder="请输入合格证号"
                v-decorator="['qualifiedNumber', { rules: [{ required: false, message: '请输入合格证号' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="动力蓄电池组编号">
              <a-input
                placeholder="请输入动力蓄电池组编号"
                v-decorator="['batteryNumber', { rules: [{ required: false, message: '请输入动力蓄电池组编号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="货物进口证明书编号">
              <a-input
                placeholder="请输入货物进口证明书编号"
                v-decorator="[
                  'importProveNumber',
                  { rules: [{ required: false, message: '请输入货物进口证明书编号' }] },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>-->
    </a-spin>
    <!-- <a-button type="primary" @click="saveDraft">暂存</a-button> -->
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'MoveStorageModel',
  data() {
    return {
      title: '交易信息',
      visible: false,
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmOrderManager/add',
        edit: '/cxm/cxmOrderManager/edit',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        getSaleInfos: '/cxm/cxmOrderManager/getSaleInfos',


        getStoreId: '/sale/cxmSaleStoreInfo/queryStoreMap',//获取库房信息
        getCarStorage:'/sale/cxmSaleCarInfo/queryCarInfoByVin'//通过vin获取库房名
      },
      showDing: false,
      showEnterpriseUscc: false,
      storeName: [],
      storeId: []
    }
  },
  created() {
    getAction(this.url.getStoreId).then((res) => {
      if (res.success) {
        for (const key in res.result) {
          this.storeName.push(res.result[key]);
          this.storeId.push(key);
        }
      }
    })
    
  },
  methods: {
    getStorageName(a){
      console.log(a.target.value);
      let parmas = {vin:a.target.value}
      getAction(this.url.getCarStorage,parmas).then((res)=>{
        if(res.success){
          console.log(res.result.storeName);
          this.form.setFieldsValue({
            storeName:res.result.storeName
          })
        }
      })
    },
    saleSelect(value) {
      console.log('saleSelect', value);
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("salesName"));
        let httpurl = this.url.getSaleInfosLike;
        let params = {
          salesName: this.form.getFieldValue("salesName")
        }
        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result;
            this.saleSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName);
              if (i > 8) {
                break;
              }
            }
          }
        })
      }, 100);
    },
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add() {
      const that = this;
      let httpurl = this.url.getDraft;
      let params = {
        bType: "order"
      };
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          if (res.result) {
            that.edit(JSON.parse(res.result))
          } else {
            getAction(that.url.getSaleInfos, params).then((res) => {
              that.edit(res.result)
            })
          }
        } else {
          that.edit({})
        }
      })
    },
    edit(record) {
      console.log(record);
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model);
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          batteryNumber: this.model.batteryNumber,
          businessAddress: this.model.businessAddress,
          carBrand: this.model.carBrand,
          carColor: this.model.carColor,
          carModel: this.model.carModel,
          carType: this.model.carModel,
          carTypeConfiguration: this.model.carTypeConfiguration,
          carVin: this.model.carVin,
          depositAttribute: this.model.depositAttribute,
          depositContent: this.model.depositContent,
          documentNumber: this.model.documentNumber,
          documentType: this.model.documentType,
          engineNumber: this.model.engineNumber,
          enterpriseId: this.model.enterpriseId,
          enterpriseName: this.model.enterpriseName,
          enterpriseUscc: this.model.enterpriseUscc,
          epositAmount: this.model.epositAmount,
          fuelType: this.model.fuelType,
          importEngineNumber: this.model.importEngineNumber,
          importProveNumber: this.model.importProveNumber,
          interiorColor: this.model.interiorColor,
          isNewCar: this.model.isNewCar,
          orderDate: this.model.orderDate ? moment(this.model.orderDate) : null,
          orderNumber: this.model.orderNumber,
          operationAddr: this.model.operationAddr,
          ownerName: this.model.ownerName,
          ownerPhone: this.model.ownerPhone,
          qualifiedNumber: this.model.qualifiedNumber,
          quoteAmount: this.model.quoteAmount,
          registerDistinct: this.model.registerDistinct,
          salesName: this.model.salesName,
          salesPhone: this.model.salesPhone,
        })
      })
      if (this.model.enterpriseUscc) {
        this.showEnterpriseUscc = true;
      } else {
        this.showEnterpriseUscc = false;
      }

    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add

            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null

          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(this.model, values);
        //时间格式化
        formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null;
        let httpurl = this.url.saveDraft;

        console.log(JSON.stringify(formData));
        let Data = {};
        Data.btype = "order";
        Data.content = JSON.stringify(formData);
        console.log(Data);
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
</style>